<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="gradient-bg">iCSS</div>
    <h1 class="gradient-text">Full Stack Developer</h1>
    <p class="blink-text tac">🔥若对CSS技巧很感兴趣，请关注我喔</p>
    <div class="square-bg"></div>
    <div class="mask-bg">
        <div></div>
    </div>
</body>
<style>
    /* 
    声明`linear-gradient()`产生从左上角往右下角的渐变效果，将背景定位在左边，通过`animation`控制背景定位左右徘徊产生动态的渐变背景。
    */
    .gradient-bg {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        background: linear-gradient(135deg, #f66, #f90, #3c9, #09f, #66f) left center/400% 400%;
        font-weight: bold;
        font-size: 100px;
        color: #fff;
        animation: move 10s infinite;
    }
    @keyframes move {
        0%,
        100% {
            background-position-x: left;
        }
        50% {
            background-position-x: right;
        }
    }
    /* 
    实现原理与上述`镂空文本`和`渐变背景`一致，在声明`background-image`时由图像路径改成`linear-gradient()`，再通过`filter:hue-rotate()`在指定时间内改变背景色相
     */
    .gradient-text {
        background-image: linear-gradient(90deg, #f66, #f90);
        background-clip: text;
        line-height: 60px;
        font-size: 60px;
        color: transparent;
        animation: hue 5s linear infinite;
    }
    @keyframes hue {
        from {
            filter: hue-rotate(0);
        }
        to {
            filter: hue-rotate(-1turn);
        }
    }
    .blink-text {
        width: 100%;
        background-image: linear-gradient(-45deg, #f66 30%, #fff 50%, #f66 70%);
        background-size: 200%;
        background-clip: text;
        background-blend-mode: hard-light;
        font-weight: bold;
        font-size: 20px;
        color: transparent;
        animation: shine 2s infinite;
    }
    @keyframes shine {
        from {
            background-position: 100%;
        }
        to {
            background-position: 0;
        }
    }
    /* 通过渐变 实现重复平铺效果 */
    .square-bg {
        width: 500px;
        height: 300px;
        background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%), linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);
        background-position: 0 0, 20px 20px;
        background-size: 40px 40px;
    }
    
    /* 遮盖 */
    .mask-bg {
        display: flex;
        overflow: hidden;
        justify-content: center;
        align-items: center;
        position: relative;
        height: 520px;
        &::after {
            position: absolute;
            left: 0px;
            right: 0px;
            top: 0px;
            bottom: 0px;
            background: url(https://ly-sys-image.oss-cn-beijing.aliyuncs.com/img/uploads/api/202408/6aa5ba70214fb643c81e2c3f37ae9092.png) no-repeat center/cover;
            /* filter: blur(10px); */
            content: "";
        }
        div {
            position: relative;
            z-index: 9;
            width: 300px;
            height: 300px;
            background: url(https://ly-sys-image.oss-cn-beijing.aliyuncs.com//img/uploads/api/202405/7f06f927955454505f7c953a24cf2665.png) left center/150% auto;
            mask: url( https://ly-sys-image.oss-cn-beijing.aliyuncs.com//img/uploads/api/202405/86ebef316e22672919316b5b61c86ec6.png) ;
            animation: move 10s infinite;
        }
    }
    @keyframes move {
        0% {
            background-position-x: 0;
        }
        50% {
            background-position-x: 100%;
        }
    }
</style>
</html>